<!doctype html>
<html lang="en">

<head>
  {{ partial "head.html" . }}
</head>

<body
  class="flex flex-col items-center bg-gradient-to-r from-background-light from-20% to-white to-30% text-base dark:from-gray-dark-100 dark:to-background-dark dark:text-white">
  {{ partial "header.html" . }}
  <main class="relative flex w-full max-w-[1920px]">
    <!-- Sidebar -->
    <div style="scroll-behavior: smooth;" x-data x-init="$nextTick(() => {
          const container = $el; // The div with overflow
          const item = document.getElementById('sidebar-current-page')
          if (item) {
              const containerTop = container.scrollTop;
              const containerBottom = containerTop + container.clientHeight;

              const itemTop = item.offsetTop - container.offsetTop;
              const itemBottom = itemTop + item.offsetHeight;

              // Scroll only if the item is out of view
              if (itemBottom > containerBottom - 200) {
                  container.scrollTop = itemTop - (container.clientHeight / 2 - item.offsetHeight / 2);
              }
          }
      })"
      class="md:h-[calc(100vh-64px)] fixed md:sticky top-0 md:top-16 z-40 hidden h-screen flex-none overflow-y-auto overflow-x-hidden bg-background-light dark:bg-gray-dark-100 w-full md:z-auto md:block md:w-[300px]"
      :class="{ 'hidden': ! $store.showSidebar }">
      <!-- Gray backdrop on small screens -->
      <div class="fixed bg-black/50 md:hidden" x-show="$store.showSidebar" @click="openSidebar = false"
        x-transition.opacity></div>
      <div class="z-50 w-full bg-background-light p-4 dark:bg-gray-dark-100 md:block md:w-[300px]">
        <!-- Collapse button for small screens -->
        <button class="my-4 md:hidden" @click="$store.showSidebar = false">
          <span class="icon-svg">{{ partialCached "icon" "arrow_left_alt" "arrow_left_alt" }}</span>
          Back
        </button>
        <!-- Actual Sidebar Content -->
        {{ block "left" . }}
          {{ partial "sidebar/mainnav.html" . }}
          {{ partial "sidebar/sections.html" . }}
        {{ end }}
      </div>
    </div>

    <!-- Main content -->
    <div {{ if ne .Params.sitemap false }}data-pagefind-body{{- end }}
      class="w-full min-w-0 bg-white p-8 dark:bg-background-dark">
      {{ block "main" . }}
      {{ end }}
    </div>
  </main>

  <footer class="w-full">{{ partialCached "footer.html" . }}</footer>

  {{/* Load the YouTube player if the page embeds a YouTube video */}}
  {{ with .Store.Get "youtube" }}
  {{ partial "youtube-script.html" . }}
  {{ end }}
</body>

</html>
